<template>
  <div class="one-map-3d">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
  import DivLabel from './comp/divLabel.js';
  export default {
    data() {
      return {
        viewer: null
      };
    },
    mounted() {
      this.initEarth();
      this.addDivLabel();
    },
    methods: {
      initEarth() {
        this.viewer = new Cesium.Viewer('cesiumContainer', {
          homeButton: false,
          sceneModePicker: false,
          baseLayerPicker: false, // 影像切换
          animation: true, // 是否显示动画控件
          infoBox: false, // 是否显示点击要素之后显示的信息
          selectionIndicator: false, // 要素选中框
          geocoder: false, // 是否显示地名查找控件
          timeline: true, // 是否显示时间线控件
          fullscreenButton: false,
          shouldAnimate: false,
          navigationHelpButton: false // 是否显示帮助信息控件
        });
      },
      addDivLabel() {
        let val = {
          viewer: this.viewer,
          position: [108, 34],
          height: 0,
          title: 'lrtest',
          id: '20231204xs'
        };
        let label = new DivLabel(val);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .one-map-3d {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .cesiumContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }
  }
</style> 